<template>
    <div class="main-box">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="图片" name="img">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="search-box">
                            <el-input placeholder="搜索分类" v-model="filterText" clearable size="small">
                            </el-input>
                            <i class="el-icon-plus" @click="clickAddCategory()" title="添加"></i>
                        </div>
                        <div class="category-main">
                            <p class="category-empty-btn" @click="categoryEmptyBtn">全部图片</p>
                            <el-tree class="filter-tree" :data="categoryListData" :props="defaultProps" default-expand-all
                                :filter-node-method="filterNode" ref="tree" @node-click="handleNodeClick"
                                style="position: relative;">
                                <span class="custom-tree-node" slot-scope="{ node }" style="width: 100%;height: 100%;">
                                    <div class="category-box">
                                        <span class="category-text">{{ node.label }}</span>
                                        <div class="category-btn">
                                            <i class="el-icon-edit-outline" @click="clickEditCategory(node.data)"
                                                title="修改"></i>
                                            <i class="el-icon-delete" @click="clickDelCategory(node.data)" title="删除"></i>
                                        </div>
                                    </div>
                                </span>
                            </el-tree>
                        </div>
                    </el-col>
                    <el-col :span="20">
                        <div class="img-main">
                            <div class="header">
                                <el-upload class="upload-demo" :action="domain" multiple :show-file-list="false"
                                    :on-success="handleAvatarSuccess" :headers="headers">
                                    <el-button type="primary" icon="el-icon-upload" size="mini">上传图片</el-button>
                                </el-upload>
                                <el-button type="danger" icon="el-icon-delete" size="mini" @click="clickBatchDelMaterial"
                                    :disabled="!selectedMaterialIds.length">删除图片</el-button>
                                <div class="block">
                                    <el-cascader v-model="changeMoveMaterialCategoryId" ref="moveMaterial"
                                        :options="categoryListData" :props="cascaderProps" size="mini" clearable filterable
                                        @visible-change="changeMoveMaterial($event, changeMoveMaterialCategoryId)"
                                        placeholder="移动文件至">
                                    </el-cascader>
                                </div>
                            </div>
                            <div class="img-body">
                                <div class="img-item" v-for="(item, index) in materialListData" :title="item.name"
                                    :key="index" @click="clickSelectedMaterial(item.id)"
                                    :style="(selectedMaterialIds.indexOf(item.id) >= 0) ? 'border: 2px dashed red;' : ''">
                                    <el-image :src="item.url" ref="preview" @click="clickDelSrcList(index)">
                                        <div slot="error" class="image-slot">
                                            <i class="el-icon-picture-outline"></i>
                                        </div>
                                    </el-image>
                                    <span class="img-name">{{ item.name }} </span>
                                    <div class="btn-box">
                                        <i class="el-icon-view" @click.stop="clickPreviewImg(index)"></i>
                                        <i class="el-icon-edit-outline" @click.stop="clickEditMaterialName(item)"></i>
                                        <i class="el-icon-delete" @click.stop="clickDelMaterial(item.id)"></i>
                                    </div>
                                    <el-badge v-if="selectedMaterialIds.indexOf(item.id) >= 0"
                                        :value="selectedMaterialIds.indexOf(item.id) + 1" :max="99" />
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="文件预留区域" name="file">
            </el-tab-pane>
            <el-tab-pane label="视频预留区域" name="video">
            </el-tab-pane>
        </el-tabs>

        <div class="page-box">
            <el-pagination @current-change="handleCurrentChange" :page-size="query.limit"
                layout="total, prev, pager, next, jumper" :total="listTotal" :current-page="query.page">
            </el-pagination>
        </div>

        <!-- 添加分类 -->
        <x-add ref="add" @updateCategoryData="updateCategoryData" />
        <!-- 编辑 -->
        <x-edit ref="edit" @updateCategoryData="updateCategoryData" />

        <!-- 编辑图片名称 -->
        <x-editMaterialName ref="editMaterialName" @updateList="updateList" />
    </div>
</template>
  
<script>
import { config } from '@/config/config';
import { list, add, del, edit } from '@/api/renovation/category';
import { list as materialList, move, del as delMaterial } from '@/api/renovation/material';
export default {
    name: "list",
    components: {
        'x-add': () => import('./category/add'),
        'x-edit': () => import('./category/edit'),
        'x-editMaterialName': () => import('./edit'),
    },
    data() {
        return {
            headers: {
                Authorization: 'bearer ' + localStorage.getItem("token")
            },
            domain: config.requestApi + '/admin/common/Upload/upload',
            filterText: '',
            activeName: 'img',
            categoryListData: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            categoryInfo: [],
            categoryBtn: {
                isShow: false,
                top: 0,
                left: 0
            },
            materialListData: [],
            listTotal: 0,
            query: {
                page: 1,
                limit: 32,
                category_id: ''
            },
            selectedMaterialIds: [],
            cascaderProps: {
                children: 'children',
                label: 'name',
                value: 'id',
                checkStrictly: true
            },
            srcList: [],
            value: [],
            changeMoveMaterialCategoryId: []
        }
    },
    mounted() {
        this.getCategoryTree();
        this.getMaterialListData();
    },
    methods: {
        updateList() {
            this.getMaterialListData();
        },
        getCategoryTree() {
            list().then(res => {
                this.categoryListData = res.data
            })
        },
        clickPreviewImg(index) {
            this.$refs.preview[index].previewSrcList = this.srcList
            this.$refs.preview[index].clickHandler()
        },
        clickDelSrcList(index) {
            this.$refs.preview[index].previewSrcList = [];
        },
        getMaterialListData() {
            materialList(this.query).then(res => {
                this.materialListData = res.data.data
                this.listTotal = res.data.count

                this.materialListData.forEach(item => {
                    this.srcList.push(item.url)
                });
            })
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        handleNodeClick(data) {
            this.query.category_id = data.id;
            this.getMaterialListData();
        },
        clickCategoryIconBtn(categoryInfo) {
            this.categoryInfo = categoryInfo;
        },
        clickSelectedMaterial(materialId) {
            let index = this.selectedMaterialIds.indexOf(materialId);
            if (index >= 0) {
                this.selectedMaterialIds.splice(index, 1);
            } else {
                this.selectedMaterialIds.push(materialId)
            }
        },
        clickDelCategory(categoryInfo) {
            this.$confirm("<span style='color:red;'>删除无法找回, 是否继续?</span>", '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                dangerouslyUseHTMLString: true,
                type: 'warning'
            }).then(() => {
                del({ 'ids': categoryInfo.id }).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    });
                    this.getCategoryTree();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        clickEditCategory(categoryInfo) {
            this.$refs.edit.dialogFormVisible = true;
            this.$refs.edit.initData(categoryInfo);
        },
        clickAddCategory() {
            this.$refs.add.dialogFormVisible = true;
        },
        categoryEmptyBtn() {
            this.query.category_id = '';
            this.getMaterialListData();
        },
        updateCategoryData() {
            this.getCategoryTree();
        },
        handleAvatarSuccess(res) {
            this.$message({
                message: res.msg,
                type: res.code == config.successCode ? 'success' : 'error'
            });
            this.getMaterialListData();
        },
        handleCurrentChange(page) {
            this.query.page = page;
            this.getMaterialListData();
        },
        changeMoveMaterial(event, changeMoveMaterialCategoryId) {
            if (!event && this.changeMoveMaterialCategoryId.length) {
                if (!this.selectedMaterialIds.length) {
                    this.$message({
                        type: 'info',
                        message: '未选择需移动图片'
                    });

                    return;
                }

                move({ 'ids': this.selectedMaterialIds.toString(), 'category_id': this.changeMoveMaterialCategoryId[this.changeMoveMaterialCategoryId.length - 1] }).then(res => {
                    this.$message({
                        type: 'success',
                        message: '移动图片成功'
                    });
                    this.selectedMaterialIds = this.changeMoveMaterialCategoryId = [];
                    this.getMaterialListData();
                })
            }
        },
        clickEditMaterialName(materialInfo) {
            this.$refs.editMaterialName.dialogFormVisible = true;
            this.$refs.editMaterialName.initData(materialInfo);
        },
        clickDelMaterial(id) {
            this.$confirm("<span style='color:red;'>删除无法找回, 是否继续?</span>", '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                dangerouslyUseHTMLString: true,
                type: 'warning'
            }).then(() => {
                delMaterial({ 'ids': id }).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    });
                    this.getMaterialListData();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        clickBatchDelMaterial() {
            if (!this.selectedMaterialIds.length) {
                this.$message({
                    type: 'info',
                    message: '请选择删除图片'
                });

                return;
            }

            this.$confirm("<span style='color:red;'>删除无法找回, 是否继续?</span>", '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                dangerouslyUseHTMLString: true,
                type: 'warning'
            }).then(() => {
                delMaterial({ 'ids': this.selectedMaterialIds.toString() }).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    });
                    this.getMaterialListData();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
}
</script>
  
<style lang="less" scoped>
.main-box {
    background-color: white;
    height: 100%;
    padding: 15px 30px;
    box-sizing: border-box;

    .el-tabs {
        height: calc(100% - 40px);
        overflow: auto;
    }

    .search-box {
        display: flex;
        justify-content: space-between;

        i {
            width: 28px;
            height: 28px;
            margin-left: 5px;
            margin-top: 2px;
            border-radius: 5px;
            text-align: center;
            line-height: 28px;

            &:hover {
                cursor: pointer;
                background-color: var(--bgLightBlue);
                color: var(--fontDarkBlue);
                animation: leftRightShake 0.5s;
            }
        }
    }

    .category-main {
        margin-top: 10px;
        font-size: 14px;
        line-height: 26px;
        color: #606266;

        .category-empty-btn {
            padding-left: 10px;
            box-sizing: border-box;

            &:hover {
                cursor: pointer;
                background-color: #F5F7FA;
            }
        }

        .el-tree {

            .custom-tree-node {
                padding-right: 5px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;

                .category-box {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;

                    .category-text {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        width: 170px;
                    }

                    .category-btn {
                        display: flex;
                        justify-content: flex-end;

                        i {
                            color: var(--fontDarkBlue) !important;
                            margin-left: 5px;

                            &:hover {
                                animation: leftRightShake 0.5s;
                            }
                        }

                        i.el-icon-delete {
                            color: red !important;
                        }
                    }
                }

                i {
                    line-height: 26px;
                    color: red;
                    display: none;
                }

                &:hover {
                    i {
                        display: block;
                    }
                }
            }
        }
    }
}

.img-main {
    height: 100%;
    display: flex;
    flex-direction: column;

    .header {
        display: flex;
        justify-content: flex-start;
        margin-left: 8px;

        &>* {
            margin-right: 12px;
        }
    }

    .img-body {
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-top: 10px;
        margin-left: -3px;
        overflow: auto;

        .img-item {
            margin: 5px 8px;
            width: 145px;
            height: 135px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            border: 1px solid var(--borderGrey);
            box-sizing: border-box;
            padding: 3px;
            overflow: hidden;

            .el-badge {
                position: absolute;
                top: 3px;
                right: 3px;
            }

            .el-badge :first-child {
                // background-color:red!important;
            }

            &:hover {
                border: 1px solid red;
                box-sizing: border-box;
                cursor: pointer;
            }

            &:hover .btn-box {
                display: block;
            }

            span {
                font-size: 14px;
                line-height: 24px;
                width: 145px;
                white-space: nowrap;
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .img-name {
                font-size: 13px;
                // padding: 0 3px 3px 3px;
                box-sizing: border-box;
                text-align: center;
                // background-color: rgba(191, 191, 191, 0.2);
            }

            .btn-box {
                width: 90px;
                display: none;
                position: absolute;
                bottom: 24px;
                box-sizing: border-box;
                transition: all 0.5s;
                text-align: center;
                background-color: var(--bgLightBlue);

                i {
                    display: inline-block;
                    width: 30%;
                    height: 20px;
                    line-height: 20px;
                    text-align: center;

                    &:hover {
                        background-color: var(--bgLightBlue);
                        color: var(--fontDarkBlue);
                        animation: leftRightShake 0.5s;
                    }
                }

                i.el-icon-delete {
                    color: red;
                }
            }
        }

        .el-image {
            height: 100%;
        }
    }
}

.page-box {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
}
</style>